<template>
  <div class="box abnormal-equipment">
    <div class="header">
      <div class="title">异常设备监控</div>
      <el-icon @click="handleMore"><MoreFilled /></el-icon>
    </div>
    <el-scrollbar v-if="listData.length" class="scrollbar body">
      <el-table
        :data="listData"
        fit
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{
          padding: '7px 0 6px',
          background: '#EFF0F2',
          'font-weight': '400',
          'text-align': 'left',
          color: '#333333',
        }"
        :cell-style="{
          padding: '15px 0',
          'text-align': 'left',
          color: '#999999',
        }"
      >
        <el-table-column label="故障时间" width="160px">
          <template #default="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备地址" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备编号" width="120px">
          <template #default="scope">
            <span>{{ scope.row.innerCode }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <!-- TODO：一开始显示加载中 -->
    <div v-else class="empty">
      <img src="@/assets/images/empty.png" />
      <div class="tips">暂无数据</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { listVm } from '@/api/manage/vm'
import { loadAllParams } from "@/api/page"

const router = useRouter()
const listData = ref([])

// 获取故障设备列表
const fetchAbnormalVms = async () => {
  try {
    const res = await listVm(loadAllParams)
    if (res.rows && res.rows.length) {
      // 筛选出故障设备
      const abnormalVms = res.rows.filter(vm => {
        try {
          // 检查运行状态是否为异常
          const runningStatus = vm.runningStatus ? JSON.parse(vm.runningStatus) : null;
         
          return !runningStatus?.status // status为false表示异常
        } catch (e) {
          console.error('Error parsing runningStatus:', e)
          return true // 解析失败也视为异常
        }
      })

      // 按故障时间倒序排序
      listData.value = abnormalVms.sort((a, b) => {
        const timeA = new Date(a.updateTime).getTime()
        const timeB = new Date(b.updateTime).getTime()
        return timeB - timeA
      })

      console.log('异常设备数量:', listData.value.length)
    }
  } catch (error) {
    console.error('获取故障设备列表失败:', error)
    listData.value = []
  }
}

// 点击更多
const handleMore = () => {
  router.push({ path: 'vm/vmStatus' })
}

onMounted(() => {
  fetchAbnormalVms()
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.abnormal-equipment {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 120px) * 0.4);
  min-height: 353px;
  background: #ffffff;
  border-radius: 20px;

  .more {
    color: $--color-primary;
    cursor: pointer;
  }

  .empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tips {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }

  .body {
    flex: 1;
    margin-top: 20px;
  }
}
</style>